<template>
  <div>
    <div class="index crown">
      <section class="common-container play-bar-after search-bar-after">
        <!--搜索模块start-->
        <div class="search-bar main-bc">
          <div class="content main-bc">
            <section class="icon">
              <img src="~assets/images/icon-search.jpg">
            </section>
            <section>
              <input placeholder="搜索专辑、故事、歌曲"/>
            </section>
          </div>
        </div>
        <!--搜索模块emd-->
        <!--头部广告图-->
        <div class="top-banner">
          <img src="~assets/images/banner0.jpg" alt="">
        </div>
        <!--改动start-->
        <div class="article-list">
          <div class="sub-title" style="margin: 0;">
            <div class="left">热门推荐</div>
          </div>
        </div>
        <div class="top-category clearfix">
          <!--顶部菜单循环start-->

          <!--添加animate-box-->
          <section class="animate-box">
            <img src="~assets/images/icon-ca0.jpg" alt="">
            <h5>欢乐儿测试</h5>
          </section>
          <section class="animate-box">
            <img src="~assets/images/icon-ca1.jpg" alt="">
            <h5>童话故事测</h5>
          </section>
          <section class="animate-box">
            <img src="~assets/images/icon-ca2.jpg" alt="">
            <h5>国学经典测</h5>
          </section>
          <section class="animate-box">
            <img src="~assets/images/icon-ca3.jpg" alt="">
            <h5>英语启蒙测</h5>
          </section>
          <section class="animate-box">
            <img src="~assets/images/icon-ca3.jpg" alt="">
            <h5>英语启蒙测</h5>
          </section>
          <section class="animate-box">
            <img src="~assets/images/icon-ca3.jpg" alt="">
            <h5>英语启蒙测</h5>
          </section>
          <section class="animate-box">
            <img src="~assets/images/icon-ca3.jpg" alt="">
            <h5>英语启蒙测</h5>
          </section>
          <section class="animate-box">
            <img src="~assets/images/icon-ca3.jpg" alt="">
            <h5>英语启蒙测</h5>
          </section>
          <section class="animate-box">
            <img src="~assets/images/icon-ca3.jpg" alt="">
            <h5>英语启蒙测</h5>
          </section>
          <section class="animate-box">
            <img src="~assets/images/icon-ca3.jpg" alt="">
            <h5>英语启蒙测</h5>
          </section>
          <!--顶部菜单end-->
        </div>
        <!--改动end-->
        <!--<div class="top-category more clearfix">
                    <section>
                        <img src="~assets/images/icon-ca0.jpg" alt="">
                        <h5>欢乐儿歌</h5>
                    </section>
                    <section>
                        <img src="~assets/images/icon-ca0.jpg" alt="">
                        <h5>欢乐儿歌</h5>
                    </section>
                    <section>
                        <img src="~assets/images/icon-ca0.jpg" alt="">
                        <h5>欢乐儿歌</h5>
                    </section>
                    <section>
                        <img src="~assets/images/icon-ca0.jpg" alt="">
                        <h5>欢乐儿歌</h5>
                    </section>
                    <section>
                        <img src="~assets/images/icon-ca0.jpg" alt="">
                        <h5>欢乐儿歌</h5>
                    </section>
                    <section>
                        <img src="~assets/images/icon-ca0.jpg" alt="">
                        <h5>欢乐儿歌</h5>
                    </section>
                    <section>
                        <img src="~assets/images/icon-ca1.jpg" alt="">
                        <h5>童话故事</h5>
                    </section>
                    <section>
                        <img src="~assets/images/icon-ca1.jpg" alt="">
                        <h5>童话故事</h5>
                    </section>
                    <section>
                        <img src="~assets/images/icon-ca2.jpg" alt="">
                        <h5>国学经典</h5>
                    </section>
                    <section>
                        <img src="~assets/images/icon-ca3.jpg" alt="">
                        <h5>英语启蒙</h5>
                    </section>
                    <section>
                        <img src="~assets/images/icon-ca3.jpg" alt="">
                        <h5>英语启蒙</h5>
                    </section>
                    <section>
                        <img src="~assets/images/icon-ca3.jpg" alt="">
                        <h5>英语启蒙</h5>
                    </section>
                </div>-->
        <!--模块循环start-->
        <div class="article-list">
          <div class="sub-title">
            <div class="left">精品推荐</div>
          </div>
          <div class="list">
            <ul class="clearfix">
              <!--内容循环start-->
              <li class="animate-box">
                <img src="~assets/images/demo.jpg" alt="">
                <h5>不爱睡觉的猴子</h5>
              </li>
              <!--内容循环end-->
            </ul>
          </div>
        </div>
        <!--模块循环end-->
        <!--模块循环start-->
        <div class="article-list">
          <div class="sub-title">
            <div class="left">精品推荐</div>
          </div>
          <div class="list demo">
            <ul class="clearfix">
              <!--内容循环start-->
              <li class="animate-box">
                <img src="~assets/images/demo.jpg" alt="">
                <h5>test不爱睡觉的猴子</h5>
              </li>
              <!--内容循环end-->
            </ul>
          </div>
        </div>
        <!--模块循环end-->
        <!--模块循环start-->
        <div class="article-list">
          <div class="sub-title">
            <div class="left">排行榜</div>
          </div>
          <div class="list">
            <ul class="clearfix">
              <!--内容循环start-->
              <li class="animate-box">
                <img src="~assets/images/demo.jpg" alt="">
                <h5>不爱睡觉的猴子</h5>
              </li>
              <!--内容循环end-->
            </ul>
          </div>
        </div>
        <!--模块循环end-->
      </section>
    </div>
    <!--底部播放栏start-->
    <div class="play-bar">
      <div><img src="~assets/images/playbar0.jpg" alt=""></div>
      <p>设备已连接</p>
      <div><img src="http://alicloud.actions-semi.com/zhiban/assets/static/img/icon/playbar-play-icon.png" alt=""></div>
      <div><img src="http://alicloud.actions-semi.com/zhiban/assets/static/img/icon/playbar-forward-icon.png" alt="">
      </div>
      <div class="sp"><img src="~assets/images/playbar3.jpg" alt=""></div>
    </div>
    <!--底部播放栏end-->
    <!--播放界面start-->
    <div class="play-component" id="play-component">
      <div class="close"><img src="~assets/images/close.jpg" alt=""></div>
      <div class="content">
        <img class="poster" src="~assets/images/demo.jpg" alt="">
        <h3 class="title">不爱睡觉的猴子</h3>
        <div class="btn-g">
          <div><img src="~assets/images/btn-g3_on.png" alt=""></div>
        </div>
        <div class="seekbar-container">
          <span class="left">01：30</span>
          <div class="seekbar">
            <div class="process">
              <img class="seek" src="~assets/images/seek.png" alt="">
            </div>
          </div>
          <span class="right">11：30</span>
        </div>
        <div class="play-g">
          <section><img src="~assets/images/play4.jpg" alt=""></section>
          <section><img src="~assets/images/play1.jpg" alt=""></section>
          <section><img src="~assets/images/play0.jpg" alt=""></section>
          <section><img src="~assets/images/play2.jpg" alt=""></section>
          <section><img src="~assets/images/play3.jpg" alt=""></section>
        </div>
        <div class="volume-container seekbar-container">
          <span class="left"><img src="~assets/images/volume1.png"/></span>
          <div class="seekbar">
            <div class="process">
              <img class="seek" src="~assets/images/seek.png" alt="">
            </div>
          </div>
          <span class="right"><img src="~assets/images/volume0.png"/></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {categorylist_get} from '@/api'
  import ScrollReveal from 'scrollreveal'
  export default {
    data() {
      return {}
    },
    mounted() {
      categorylist_get().then(e => {
        console.info(e);
      })


      var e = {
        origin: "top",
        viewFactor: .15,
        duration: 800,
        distance: "0px",
        scale: .5,
        easing: 'ease',
        mobile: true
      };
      window.sr = new ScrollReveal(e);
      var t = {
        reset: !1,
        viewOffset: {
          bottom: 100
        }
      };
      sr.reveal(".animate-box", t);
    }
  }
</script>
<style>
  @import '../assets/css/components.css';

  .index {
    overflow-y: scroll;
    height: 100%;
    -webkit-overflow-scrolling: touch !important;
  }

  .index .common-container{
    height:calc(100%+1px);
  }

  .index .top-banner img {
    display: block;
    width: 100%
  }

  .index .top-category {
    padding: 0 6px;
  }

  .index .top-category.more {
    display: none;
  }

  /*改动start*/
  .index .top-category section {
    text-align: center;
    float: left;
    margin: 22px 10px 0;
    width: 137px;
  }

  .index .top-category section img {
    display: block;
    margin: 0 auto 10px;
    width: 86px;
    border-radius: 100px;
  }

  /*改动end*/
  .index .top-category section h5 {
    font-size: 20px;
  }

  .play-bar-after:after {
    width: 100%;
    height: 85px;
    content: '';
    display: block;
  }

  .search-bar-after:before {
    width: 100%;
    height: 71px;
    content: '';
    display: block;
  }

  .index #play-component {
    transition: top 0.5s;
  }

  .index .play-show {
    top: 0 !important;
  }

  .index .article-list {
    padding: 0 27px;
    margin-top: 22px;
  }

  .index .sub-title {
    display: flex;
    margin: 0 0 10px;
  }

  .index .sub-title > * {
    font-size: 25px;
    line-height: 30px;
    height: 30px;
  }

  .index .sub-title .left {
    flex: 1 1 auto;
    padding-left: 18px;
    background: url("~assets/images/arlist0.jpg") no-repeat left center;
  }

  .index .sub-title .right {
    flex: 0 0 auto;
    color: #5cd4f1;
    padding-right: 28px;
    background: url("~assets/images/arlist1.jpg") no-repeat right center;
  }

  .index .list ul li {
    float: left;
    width: 130px;
  }

  .index .list ul li img {
    width: 100%;
    border-radius:;
  }

  .index .list ul li + li {
    margin-left: 20px;
  }

  .index .list ul li:nth-child(4n+1) {
    margin-left: 0;
  }

  .animate-box {
    visibility: hidden;
  }

  .index .list ul li h5 {
    font-size: 20px;
    line-height: 24px;
    color: #585858;
    text-align: center;
    padding: 10px 0;
    word-break: break-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .play-component {
    display: none;
  }

  .item-more img {
    transition: transform 0.5s;
  }

  .item-more.active img {
    transform: rotate(-90deg);
  }
</style>
